<template>
  <div class="vip">
    <head-component class="header_bottom" title="开通会员" />
    <div class="vip_main">
      <img @click="$router.push('/vipD')" class="vip_bg" src="@/common/icon/home/vip_bg.jpg" alt="">
      <div class="vip_price_box">
        <div class="f32 col_333">会员价格:</div>
        <div class="f40 vip_price">{{price}}元</div>
      </div>
      <div class="pay_way_box">
        <div class="pay_way_title f32 col_33">支付方式:</div>
        <div class="pay_way_list" v-for="(item, index) in payWay" :key="index">
          <img class="pay_icon" :src="item.icon" alt="">
          <div class="f32 col_33 pay_name">{{item.name}}</div>
          <img class="pay_select"
            @click="selectIndex=item.index"
            :src="item.index === selectIndex ? selectIcon.selectYes : selectIcon.selectNo" alt="">
        </div>
      </div>
      <div class="global_btn vip_btn" @click="toPay">立即支付</div>
    </div>
  </div>
</template>
<script>
import headComponent from '@/components/layout/head'
export default {
  name: '',
  components: {
    headComponent
  },
  data() {
    return {
      price: '888.00',
      selectIndex: 1,
      selectIcon: {
        selectYes: require('@/common/icon/home/select_active.jpg'),
        selectNo: require('@/common/icon/home/select.jpg')
      },
      payWay: [
        {
          icon: require('@/common/icon/home/weixin.jpg'),
          name: '微信',
          selectImg: '',
          isChecked: true,
          index: 1
        },
        {
          icon: require('@/common/icon/home/zhifubao.jpg'),
          name: '支付宝',
          selectImg: '',
          isChecked: false,
          index: 2
        }
      ],
      isVip: ''
    }
  },
  watch: {

  },
  mounted() {
    this.getPrice();
  },
  methods: {

    // 获取原始会员价格
    getPrice(){
      let $this = this;
      var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      let uid = localStorage.getItem('uid');
      let token = localStorage.getItem('token');
      // let vip = localStorage.getItem('isVip');
      var data = {u_id: uid,token:token};
      $this.$axios.post('index.php?m=user&c=vip_moeny', data).then(res =>　{
        t.clear();
        if(res.data.code === 1){
          this.price = res.data.data;
        } else {
          $this.$toast({
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },
    toPay(){
      let $this = this;
      let uid = localStorage.getItem('uid');
      let token = localStorage.getItem('token');
      let payType = $this.selectIndex == 1 ? 'wxpay' : 'alipay'; // 微信wxpay  支付宝alipay
      let data = { u_id:uid, token:token, type:$this.selectIndex };
      $this.$axios.post('/index.php?m=user&c=pay', data).then(res=>{
        if(res.data.code == 1){
          let payData=res.data.data
          if(!window.plus) {
            var $this = this;
            setTimeout(function () {
              $this.$toast('支付环境出错');
            },1000)
            return false;
          } else {
            var $this = this;
            var channel = null;
            window.plus.payment.getChannels(function(s){
              $this.channels = s;
              channel = s.find(item=>{
                return item.id == payType;
              });
              window.plus.payment.request(channel, payData, function() {
                $this.$toast({
                  message: "恭喜您,开通会员成功,快去邀请好友赚取更多佣金吧",
                  duration: 1000,
                  onClose: ()=> {
                    $this.$router.back();
                  }
                });
                localStorage.setItem('isVip',1);
              }, function(e) {
                $this.$toast({
                  message: "支付失败",
                  duration: 1000,
                  onClose: ()=> {
                    $this.$router.back();
                  }
                })
              })
            })
          }
          $this.$axios.post('/index.php?m=user&c=index',{u_id: uid,token:token}).then((res) => {
            if(res.data.code == 1){
              localStorage.setItem('isVip',res.data.user.m_level);
            }
          })
        } else {
          $this.$toast({
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    }
  },

  // 支付方法
  // payFs(type,data){
  //   if(!window.plus) {
  //     var $this = this;
  //     setTimeout(function () {
  //       $this.$toast('支付环境出错');
  //     },1000)
  //     return false;
  //   } else {
  //     var $this = this;
  //     var channel = null;
  //     window.plus.payment.getChannels(function(s){
  //       $this.channels = s;
  //       channel = s.find(item=>{
  //         return item.id == type;
  //       });
  //       window.plus.payment.request(channel, data, function() {
  //         $this.$toast({
  //           message: "支付成功",
  //           duration: 1000,
  //           onClose: ()=> {
  //             $this.$router.back();
  //           }
  //         });
  //       }, function(e) {
  //         $this.$toast({
  //           message: "支付失败",
  //           duration: 1000,
  //           onClose: ()=> {
  //             $this.$router.back();
  //           }
  //         })

  //       })
  //     })
  //   }
  // },
}
</script>
<style lang="less">
  .vip{
    .header_bottom{
      border-bottom: 1Px solid #f5f5f5;
    }
    .vip_main{
      padding: 0.4rem;
      margin-top: 1.2rem;
      .vip_bg{width: 100%; display: block; border-radius: 0.2rem; }
      .vip_price_box{
        margin-top: 0.4rem;
        height: 1.4667rem;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        border-bottom: 1Px solid rgba(230, 199, 199, 0.05);
        .vip_price{ color: #fd5f5f }
      }
      .pay_way_box{
        margin-top: 0.4rem;
        .pay_way_title{
          height: 1.0667rem;
          line-height: 1.0667rem;
        }
        .pay_way_list{
          height: 1.7333rem;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          justify-content: space-between;
          -webkit-justify-content: space-between;
          border-bottom: 1Px solid rgba(0, 0, 0, 0.05);
          .pay_icon{ width: 0.9333rem; height: 0.9333rem; }
          .pay_name{ flex: 1; -webkit-flex: 1; margin-left: 0.4rem; }
          .pay_select{
            width: 0.5333rem;
            height: 0.5333rem;
          }
        }
      }
      .vip_btn{ margin-top: 2.5rem; }
    }
  }
</style>
